<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<!-- th:fragment 定义需要引入的代码块，该div包含的内容即为引用的公共内容 -->
<div th:fragment="index_header">





    <!--     电脑尺寸                  -->
    <style>
        @media screen and (min-width: 901px) {
            .mobile-phone {
                display: none;
            }

            .PC {
                width: 100%;
                background: white;
                padding: 0px 60px;
            }

            .PC .item a:hover {
                color: var(--fontColor);
                border-bottom: 2px solid var(--fontColor);
            }

            .PC .item a.active {
                border-bottom: 2px solid var(--fontColor);
                color: var(--fontColor);
                font-weight: bolder;
            }

            .PC .item a {
                text-decoration: none;
                color: #34364b;
            }

            .PC .item {
                float: left;
                position: relative;
            }

            .PC .item .accordion {
                height: 100px;
                display: inline-block;
                line-height: 100px;
                padding: 0 20px;
            }

            .PC .item .panel a:hover {
                color: var(--fontColor);
            }

            .PC .item .panel a {
                padding: 9px;
                text-align: center;
                display: block;
                color: #34364b;
                text-decoration: none;
                border-bottom: 1px solid lightgray;
            }

            .PC .item .panel {
                display: none;
                z-index: 99;
                background: white;
                border: 1px solid lightgray;
                position: absolute;
                width: 200px;
                left: -50px;
            }

            .PC .item:hover > .panel {
                display: block;
            }
        }
    </style>
    <div class="PC     clearfix">
        <div class="logo" style="float: left;  height: 100px;">
            <a href="/"><img th:src="@{/images/index/logo.png}" alt="" class="hfull"></a>
        </div>
        <div class="item">
            <a class="accordion" href="/">首页</a>
            <!--<div class="panel">-->
                <!--<ul>-->
                    <!--<li><a href="#">aaa</a></li>-->
                    <!--<li><a href="#">000000000000000000</a></li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>
        <div class="item">
            <a class="accordion" href="/about"   id="about">走进同创</a>
            <div class="panel">
                <ul>
                    <li><a href="/about/profile">公司简介</a></li>
                    <li><a href="/about/culture">企业文化</a></li>
                    <li><a href="/about/honor">公司信誉</a></li>
                    <li><a href="/about/brandhistory">品牌历程</a></li>
                    <li><a href="/about/exhibitionhalls">公司环境</a></li>
                </ul>
            </div>
        </div>
        <div class="item">
            <a class="accordion" href="/product"  id="product">产品中心</a>
            <div class="panel">
                <ul>
                    <li><a href="/product/police-box">岗亭定制</a></li>
                    <li><a href="/product/mobile-dining-car">移动餐车</a></li>
                    <li><a href="/product/mobile-toilet">移动厕所</a></li>
                    <li><a href="/product/smoking-pavilion">吸烟亭</a></li>
                    <li><a href="/product/sanitation-worker-lounge">环卫工人休息室</a></li>
                </ul>
            </div>
        </div>

        <!--<div class="item">-->
            <!--<a class="accordion" href="#">解决方案</a>-->
            <!--<div class="panel">-->
                <!--<ul>-->
                    <!--<li><a href="#">aaa</a></li>-->
                    <!--<li><a href="www.baidu.com">bbb</a></li>-->
                    <!--<li><a href="#">ccc</a></li>-->
                <!--</ul>-->
            <!--</div>-->
        <!--</div>-->

        <div class="item">
            <a class="accordion" href="/caseclassification">工程案例</a>
            <!--<div class="panel">-->
                <!--<ul>-->
                    <!--<li><a href="#">aaa</a></li>-->
                    <!--<li><a href="www.baidu.com">bbb</a></li>-->
                    <!--<li><a href="#">ccc</a></li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>

        <div class="item">
            <a class="accordion" href="/partner"  id="partner">合作伙伴</a>
            <!--<div class="panel">-->
                <!--<ul>-->
                    <!--<li><a href="#">aaa</a></li>-->
                    <!--<li><a href="www.baidu.com">bbb</a></li>-->
                    <!--<li><a href="#">ccc</a></li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>

        <div class="item">
            <a class="accordion" href="/news"  id="news">新闻中心</a>
            <!--<div class="panel">-->
                <!--<ul>-->
                    <!--<li><a href="#">aaa</a></li>-->
                    <!--<li><a href="www.baidu.com">bbb</a></li>-->
                    <!--<li><a href="#">ccc</a></li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>

        <div class="item">
            <a class="accordion" href="/contact"  id="contact">联系我们</a>
            <!--<div class="panel">-->
                <!--<ul>-->
                    <!--<li><a href="#">aaa</a></li>-->
                    <!--<li><a href="www.baidu.com">bbb</a></li>-->
                    <!--<li><a href="#">ccc</a></li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>
    </div>

































    <style>
        /*      手机尺寸      */
        @media screen and (max-width: 900px) {
            .PC {
                display: none;
            }

            .mobile-phone .menu.active {
                display: block;
                transition: all 0.5s;
                position: fixed;
                top: 0;
                bottom: 0;
                width: 100%;
                z-index: 999;
                background: #eee;
            }

            .mobile-phone .logo {
                width: 55%;
                height: 70px;
            }

            .mobile-phone .menu {
                /* max-height: 0; */
                /* overflow: hidden; */
                transition: all 0.5s;
                display: none;
            }

            .mobile-phone .accordion_phone {
                background-color: #eee;
                color: #444;
                display: block;
                cursor: pointer;
                width: 100%;
                height: 70px;
                line-height: 70px;
                padding-left: 20px;
                border: none;
                text-align: left;
                outline: none;
                font-size: 20px;
                transition: 0.4s;
            }

            .mobile-phone .active,
            .mobile-phone .accordion_phone:hover {
                background-color: #ccc;
            }

            .mobile-phone .accordion_phone:after {
                content: '';
                color: #777;
                font-weight: bold;
                float: right;
                position: relative;
                top: 16px;
                right: 36px;
                background-image: url();
                display: inline-block;
                /* background: lightblue; */
                width: 36px;
                height: 36px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: 50%;
                -webkit-transform: rotate(180deg) translateZ(0);
                transform: rotate(180deg) translateZ(0);
                -webkit-transition: all .3s ease-out;
                transition: all .3s ease-out;
            }

            .mobile-phone .active:after {
                transform: rotate(0deg) translateZ(0);
            }


            .mobile-phone .panel a {
                display: block;
                padding: 16px;
                text-decoration: none;
            }

            .mobile-phone .panel {
                padding: 0 18px;
                background-color: white;
                font-size: 20px;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.2s ease-out;
            }
        }
    </style>
    <div class="mobile-phone">
        <a href="/"><img th:src="@{/images/index/logo.png}" class="logo"></a>
        <svg xmlns="http://www.w3.org/2000/svg" width="46" onclick="show_menu()"
             style="  float: right;  margin-top: 22px;  margin-bottom: 10px;  margin-right: 22px;" fill="currentColor"
             class="bi bi-list" viewBox="0 0 16 16">
            <path fill-rule="evenodd"
                  d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
        </svg>
        <div class="menu  ">
            <svg xmlns="http://www.w3.org/2000/svg" width="46" onclick="show_menu()"
                 style="  float: right;  margin-top: 22px;  margin-bottom: 10px;  margin-right: 22px;"
                 fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                      d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
            </svg>
            <div class="clearfix"></div>
            <a class="accordion_phone" onclick="toggle_this(this)">走进同创</a>
            <div class="panel">
                <a href="/about/profile">公司简介</a>
                <a href="/about/culture">企业文化</a>
                <a href="/about/honor">公司信誉</a>
                <a href="/about/brandhistory">品牌历程</a>
                <a href="/about/exhibitionhalls">公司环境</a>
            </div>
            <a class="accordion_phone" onclick="toggle_this(this)">产品中心 </a>
            <div class="panel">
                <a href="/product/police-box">岗亭定制</a>
                <a href="/product/mobile-dining-car">移动餐车</a>
                <a href="/product/mobile-toilet">移动厕所</a>
                <a href="/product/smoking-pavilion">吸烟亭</a>
                <a href="/product/sanitation-worker-lounge">环卫工人休息室</a>
            </div>
            <a class="accordion_phone"  href="/caseclassification" onclick="toggle_this(this)"> 工程案例 </a>
            <!--<div class="panel">-->
            <!--<p>Lorem ipsum dolor sit amet, consectetur . .</p>-->
            <!--</div>-->
            <a class="accordion_phone"  href="/partner" onclick="toggle_this(this)"> 合作伙伴 </a>
            <!--<div class="panel">-->
            <!--<p>Lorem ipsum dolor sit amet, consectetur . .</p>-->
            <!--</div>-->
            <a class="accordion_phone"  href="/news" onclick="toggle_this(this)"> 新闻中心 </a>
            <!--<div class="panel">-->
            <!--<p>Lorem ipsum dolor sit amet, consectetur . .</p>-->
            <!--</div>-->
            <a class="accordion_phone"  href="/contact" onclick="toggle_this(this)"> 联系我们 </a>
            <!--<div class="panel">-->
            <!--<p>Lorem ipsum dolor sit amet, consectetur . .</p>-->
            <!--</div>-->
        </div>
    </div>


    <script th:inline="javascript">

        function show_menu() {
            let menu = document.getElementsByClassName('menu')[0];
            // if (menu.classList.contains('active')) {
            //     menu.style.maxHeight = '100%';
            // } else {
            //     menu.style.maxHeight = null;
            // }
            menu.classList.toggle('active');
        }

        function toggle_this(eee) {
            var accordion_phonesss = document.querySelectorAll(".accordion_phone");
            // 循环绑定点击事件:
            for (let i = 0; i < accordion_phonesss.length; i++) {
                if (accordion_phonesss[i] === eee) {
                    eee.classList.toggle('active');
                    //  下个元素,  获取内容区的高度
                    let panel = eee.nextElementSibling;
                    console.log("现在的容器的高度是:     " + panel.style.maxHeight);

                    // 如果内容区的高度为真,  不为空, 说明这个内容区被撑开:
                    if (panel.style.maxHeight) {
                        console.log("现在的容器的高度是:     " + panel.style.maxHeight);   // 如果容器有高度值, 那么就把它变成 null
                        panel.style.maxHeight = null;
                        console.log("  maxHeight = null,  现在的容器的高度是:     " + panel.style.maxHeight);
                    } else {
                        console.log("现在的容器的高度是 nulllll   ");
                        panel.style.maxHeight = panel.scrollHeight + "px";      // 如果容器没有高度值, 那么就把它变成 容器的高度
                        console.log("   panel.scrollHeight + ,  现在的容器的高度是:     " + panel.style.maxHeight);
                    }
                } else {
                    accordion_phonesss[i].nextElementSibling.style.maxHeight = null;
                    accordion_phonesss[i].classList.remove('active');
                }
            }
        }
    </script>















    <p style="clear: both"></p>


    <script th:inline="javascript">
        var url6 = document.location;
        url6.origin;        // http://localhost:8081
        url6.protocol;      // http:
        url6.host;          // localhost:8081
        url6.hostname;      // localhost
        url6.port;          // 8081
        url6.pathname;      // /Movie/Read_Movie
        console.log(url6.pathname);
        var listt = url6.pathname.split("/");
        var tab = listt[1];
        document.getElementById(tab).classList.add('active')
    </script>




</div>
</html>






